<template>
    <div id="mains" class="mains reg-main">
        <div class="register" id="register">
             <section class="order-main-header">
                <mt-header title="">
                <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
                </mt-header>
            </section>
              <div class=" load-content">
                 <div class=" load-main" >
                    <dl class="user-title">
                        <dt></dt>
                        <dd>
                            <span style="font-size:24px">注册</span>
                            <span class="changeway-btn" v-show="forPhone" @click="changway">使用邮箱注册</span>
                            <span class="changeway-btn" v-show="!forPhone" @click="changway">使用手机注册</span>
                        </dd>
                    </dl>
                    <div class="user-form">
                        <div class="user-input-group" v-show="forPhone">
                            <div class="areaCode">+86</div>
                            <input autocomplete="off" growing-ignore="true" name="name" v-model="registerData.name" placeholder="请输入手机号码">
                        </div>
                        <div class="user-input-group" v-show="!forPhone">
                            <input autocomplete="off" growing-ignore="true" name="name" v-model="registerData.name" placeholder="请输入邮箱">
                        </div>
                        <div class="user-input-group keycode-group">
                            <input autocomplete="off" growing-ignore="true" name="login_name" v-model="registerData.code" placeholder="请输入验证码">
                            <div class="keycodeBtn" @click="getCode" :style="btnColor">
                            {{keycodeTip}}
                            </div>
                        </div>
                        <div class="user-input-group" >
                            <input style="position: relative;
            top: 0px;" autocomplete="off" growing-ignore="true" name="password" v-model="registerData.pwd" placeholder="请设置登录密码" type="password">
                        </div>
                        <div class="user-input-group">
                            <div class="areaCode" style="width:150px">邀请码(必填)</div>
                            <input   autocomplete="off" growing-ignore="true" @input="invCodeChange()" name="invCode" v-model="registerData.inviteCode" placeholder="请输入邀请码" >
                        </div>
                        <!-- <div class="user-input-group">
                            <select name="" id="select" v-model="registerData.userNode" :disabled='userNodeShow'>
                                <option v-for="(item,index) in nodeList" :key="index" :value="item.userInvitaCode" >超级节点：{{item.userInvitaCode}}</option>
                            </select>
                        </div> -->
                        <div id="captcha_wrap">
                            <div id="checkbox" @click="checkFun" :class="{'active-bgc':checkType}"></div>
                            <span>我已阅读并同意<i style="color:rgba(82, 152, 241, 1)">《用户注册协议》</i></span>
                        </div>
                        <div class="user-submit-group">
                            <button class="user-submit" @click="sureRegister">
                                <span>立即注册</span>
                            </button>
                        </div>
                    </div>
                    <div class="toRegister">已有账号，<router-link to="/login">立即登录</router-link></div>
                </div>
                <div class="retrun" v-if="retImgUrl"><img class="ret-img" :src="retImgUrl"></div>
                <!-- 滑块 -->
                <Geet :isGeet="isgt" @geetPath="GeetPath" @clickChange="GeetChange"></Geet>
            </div>
    </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';//导入toast组件
import Geet from "./Geet.vue";
export default {
    data(){
        return{
            forPhone:true,
            registerData:{
                name:'',
                code:'',
                pwd:'',
                areaCode: '+86',
                userNode:'',
                inviteCode:''
            },
              userNodeShow:false,
            checkType: false,
            nodeList:[],
            isgt: false,
            keycodeTip:'获取验证码',
            btnColor:'color:rgba(82, 152, 241, 1)',
            userNodeError:'',
            firstNode:'',
             retImgUrl: require('@/assets/my/return.png'),
        }
    },
    components: {
        Geet
    },
    methods:{
        handleClose(){
           this.$router.go(-1);
      },
        invCodeChange(){
            if(this.registerData.inviteCode==''){
                return ;
            }
             this.$http.post('/v1/userNode',{inviteCode:this.registerData.inviteCode}).then(res=>{
                      res=res.data;
            if(res.code == 200){
             if(res.data.length>0){
                this.registerData.userNode =res.data[0].userInvitaCode;
                this.userNodeShow =true;
                 this.nodeList.forEach(item=>{
                    if( this.registerData.userNode!=item.userInvitaCode){
                         this.nodeList[0]=res.data[0];
                    }
                 })
                   }
            }
        })
        },
        checkFun() {
            if(!this.checkType){
                this.checkType = true

            }else{
                this.checkType = false
            }
        },
        changway() {
            this.forPhone = this.forPhone? false: true
            this.registerData.name = ''
        },
        getCode() {
            let reg
            let data = this.registerData
            if(this.forPhone){
                reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
            }else{
                reg = /^[A-Za-z0-9\u4e00-\u9fa5_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            }
            if(!data.name){
                Toast('用户名不能为空')
                return
            }else if(!reg.test(data.name)){
                Toast('格式不正确')
                return
            }
            this.isgt = !this.isgt;
        },
        // 极验图片加载之后，通过更改控制变量实现可以再次加载
        GeetChange(val) {
            this.isgt = val;
        },
        GeetPath(val) {
            console.log("4,接受到图形验证参数，将参数发往服务端进行验证");
            this.isgt = false;
            this.$http.post('/v1/sendRegCode',{
                name:this.registerData.name,
                areaCode:'+86'
            }).then(res=>{
                res = res.data
                if(res.code == 200){
                this.keycodeTip = 60
                this.btnColor = 'color:#ddd'
                var timeId = setInterval(function(){
                  this.keycodeTip--
                  if(this.keycodeTip == 0){
                    clearInterval(timeId)
                    this.btnColor = 'color:rgba(82, 152, 241, 1)'
                    this.keycodeTip = '获取验证码'
                  }
                }.bind(this),1000)
              }else if(res.code == 1){
                Toast('非法请求')
              }else if(res.code == 4){
                Toast('账号已被注册或绑定')
              }else if(res.code == 6){
                Toast('账号已被禁用')
              }
            }).catch(err=>{

            })
        },
        sureRegister() {
            var reg
            let data = this.registerData
            if(this.forPhone){
                reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
            }else{
                reg = /^[A-Za-z0-9\u4e00-\u9fa5_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            }
            if(!data.name){
                Toast('用户名不能为空')
                return
            }else if(!reg.test(data.name)){
                Toast('格式不正确')
                return
            }
            if(!data.code){
                Toast('验证码不能为空')
                return
            }
            if(data.code.length != 6){
                Toast('验证码错误')
                return
            }
            if(!data.pwd){
                Toast('密码不能为空')
                return
            }
            if(this.registerData.userNode!=this.registerData.inviteCode &&this.registerData.inviteCode!=''){
              Toast("邀请码无效");
             return ;
            }
            if(this.registerData.inviteCode==''){
              Toast("邀请码不能为空");
             return ;
            }
             if (!/^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{8,20}$/.test(data.pwd)) {
            Toast("密码至少包括两种类型，长度为8-20位")
            return;
            }
            // if(!data.userNode){
            //     Toast('节点不能为空')
            //     return
            // }
            
            if(!this.checkType){
                Toast('请阅读并同意用户注册协议')
                return
            }
            this.$http.post('/v1/register',data).then(res=>{
                res = res.data
                if(res.code == 200){
                    Toast("注册成功");
                    this.$router.push("/login");
                }else if(res.code == 100){
                    Toast('请先发送验证码')
                }else if(res.code == 101){
                    Toast('发送验证码频繁，请2小时候再试')
                }else if(res.code == 102){
                    Toast('验证码错误，剩余可尝试次数为'+res.data+'次')
                }else if(res.code == 4){
                    Toast('邀请码不存在')
                }else if(res.code == 2){
                    Toast("手机号或者邮箱已被绑定或注册")
                }
            }).catch(err=>{
            })
        },
          getNode(){
            this.$http.post('/v1/userNode',{inviteCode:this.registerData.inviteCode}).then(res=>{
            res = res.data
            if(res.code == 200){
                this.nodeList = res.data
                this.registerData.userNode = this.nodeList[0].userInvitaCode;
                this.firstNode=this.nodeList[0].userInvitaCode;
            }
        }).catch(err=>{

        })
        }
    },
    mounted() {
        var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
       
        return true;
    }else{
    this.retImgUrl='';

    }
    document.getElementsByTagName("body")[0].className="login-body page-finance page-index";
            !function (w) {
            InitView();
            var evt = "onorientationchange" in w ? "orientationchange" : "resize";
            w.addEventListener(evt, function () {
                InitView()
            }, false);
            function InitView() {
                var t = 750*0.5,
                    w = screen.width,
                    h = screen.height,
                    a = w / t,
                    n = w.viewMeta || document.createElement('meta');
                    a=0.9;
                w.viewMeta || document.getElementsByTagName("head")[0].appendChild(n);
                n.setAttribute('name', 'viewport');
                n.setAttribute('content', "width=" + t + ", initial-scale=" + a + ",maximum-scale=" + a + ",minimum-scale=" + a + ", user-scalable=no,target-densitydpi=device-dpi,minimal-ui,uc-fitscreen=no");
                window.viewPortNum = a;
            }
            w.showPlaceholder = 1;
        }(window);
        var PAGE = location.pathname.replace(new RegExp('/(?:\\w{2}-\\w{2}/)?'), "").split('/')[0];
        window.onbeforeunload = function () {
            localStorage.removeItem('isPublicPage')
             };
      if(this.$route.query.inviteCode){
          this.registerData.inviteCode=this.$route.query.inviteCode;
      }else{
           this.registerData.inviteCode='';
      }
       this.getNode();
    }
}
</script>

<style lang='less' scoped>
   .order-main-header .mint-header{
    height: 50px;
    background-color: #161736;
    color: #E0E0F9
}
.retrun{
       img{
            padding-right: 20px;
       }
    position: fixed;
    z-index: 2147483647;
    left: 0;
    top: 0px;
    height: 100%;
    right: 20px;
    width: 100%;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    background: rgba(22, 23, 54, 0.7);
}
.ret-img{
    width: 98%;
   
}
    .reg-main{
    #register{
        font-size: 15px;
    }
    .user-top {
        height: 50px;
        line-height: 50px;
        padding: 0 30px;
    }
    .user-title{
        font-size: 20px;
        font-family:PingFang SC;
        font-weight:bold;
        color:#282828;
        padding-left: 50px;
        padding-right: 53px;
        dd{
            width: 100%;
            display: flex;
            justify-content: space-between;
             color: #E0E0F9;
        }
        .changeway-btn{
            color: rgba(82, 152, 241, 1);
            font-size: 16px;
            margin-top: 10px;
        }
    }
    .user-form{
        width: 100%;
        margin-top: 80px;
    }
    .user-input-group {
        border-bottom: 1px solid rgba(134, 134, 192, 1);
        margin: 14px 15px 0;
        height: 50px;
        display: flex;
        input {
             border:none;
             outline: none;
            width: 100%;
            line-height: 50px;
            height:50px;
            font-size: 16px;
              color: rgba(134, 134, 192, 1);
            // margin-bottom: 57px;
            padding-left: 19px;
            background: #161736;
        }
        select{
            width: 100%;
            font-size: 16px;
            padding-left: 19px;
            background-color: #161736;
            border: 1px solid #161736;
              color: rgba(134, 134, 192, 1);
            option{
                font-size: 14px;
            }
        }
    }
    #captcha_wrap{
        margin: 17px 0 0 20px;
        #checkbox{
            width: 12px;
            height: 12px;
            border: 1px solid #DCDCDC;
            vertical-align: middle;
            display: inline-block;
            margin-right: 20px;
        }
        .active-bgc{
            background-color: rgba(82, 152, 241, 1)
        }
    }
    .areaCode{
        width: 62px;
        border: none;
        border-right: none;
        line-height: 48px;
        padding-left: 20px;
        height: 48px;
        color: rgba(134, 134, 192, 1);
    }
    .keycode-group{
        .keycodeBtn{
            width: 250px;
            height: 48px;
            text-align: center;
            border: none;
            border-left: none;
            line-height: 48px;
            color:rgba(82, 152, 241, 1);
                background: #161736;
    top: -2px;
    position: relative;
        }
    }
    .user-submit-group {
        height: 48px;
        padding: 22px 30px 0;
        display: flex;
        justify-content: center;
    }
    .user-submit-group button.disabled, .user-submit-group button:disabled {
        background: #c5cfd5;
    }

    .user-submit-group button {
        width: 630px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        background:rgba(82,152,241,1);
        border-radius:3px;
        font-size: 16px;
        color: #fff;
    }
    button {
        border: none;
        outline: none;
        -webkit-appearance: none;
        background: transparent;
    }
    .toRegister{
        margin-top: 36px;
        text-align: center;
        color:#999999;
        a{
            text-decoration: none;
            color:rgba(82,152,241,1);
        }
    }
    #captcha_wrap {
    padding: 26px 52px 26px 12px;
     color: #E0E0F9;
    font-size: 16px;
    display: flex;
    justify-content: start;
    text-decoration:underline;
            text-align: start;
    }
}
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
        color: rgba(134, 134, 192, 1);
        letter-spacing: 1px;
         font-size: 14px;
    }
    ::-moz-placeholder { /* Firefox 19+ */  
        color: rgba(134, 134, 192, 1);
        letter-spacing: 1px;
         font-size: 14px;
    }
    :-ms-input-placeholder { /* IE 10+ */ 
        color: rgba(134, 134, 192, 1);
        letter-spacing: 1px;
         font-size: 14px;
    }
    :-moz-placeholder { /* Firefox 18- */ 
        color:rgba(134, 134, 192, 1);
        letter-spacing: 1px;
         font-size: 14px;
    }
    .order-main-header{
        height: 50px;
    }
     .load-content{
           position: absolute;
           top:90px;
           overflow-y: scroll;
           -webkit-overflow-scrolling:touch;
            width: 100%;
       }
       .load-main{
           height: 100%;
       }
</style>